<template>
  <div class="kefu">
    <van-nav-bar
      title="客服"
      left-text
      left-arrow
      style-left="{color:#eee}"
      @click-left="$router.go(-1)"
    >
      <van-icon name="wap-nav" slot="right" />
    </van-nav-bar>
    <div class="connect">
      <figure>
        <van-icon name="service-o" />
        <figcaption>在线客服</figcaption>
      </figure>
      <figure>
        <van-icon name="phone-o" />
        <figcaption>400电话</figcaption>
      </figure>
    </div>
    <div class="foot-nav">
    
    <p class="box-text"><van-icon name="comment" />在线客服<span>（8:30-21:00）</span></p>
    <van-icon name="arrow" />

  </div>
  </div>
</template>

<style scoped>
.kefu{
  height:100%;

  background:#eee;
}
.van-icon-arrow-left,
.van-icon-wap-nav {
  color: #666;
}
.van-icon-service-o ,.van-icon-phone-o{
  font-size: 0.5rem;color:#f00;
  margin-bottom:0.1rem
}

.connect{
  display:flex;
  width:100%
}
figure{
  flex:1;
  font-size: 0.15rem;
  height:1.5rem;
  border:1px solid #eee;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:#fff
}
.foot-nav{
  background:#fff;
  font-size:0.16rem;
  height:0.7rem;
  display:flex;
  padding:0 0.1rem;
  justify-content:space-between;
  align-items: center
}
.foot-nav p{
  display:flex;
}
</style>